<template>
  <!-- 页面主体容器 -->
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <!-- 左侧搜索表单 -->
      <el-form :inline="true">
        <el-form-item label="按姓名搜索">
          <el-input 
            v-model="searchForm.name" 
            placeholder="输入姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="上级单位">
          <el-input 
            v-model="searchForm.unit" 
            placeholder="输入上级单位"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <i class="el-icon-search" />搜索
          </el-button>
        </el-form-item>
      </el-form>
      
      <!-- 右侧新增按钮 -->
      <div class="button-group">
        <el-button type="success" @click="handleAdd">
          <i class="el-icon-plus" />新增人员
        </el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <el-table 
      :data="tableData" 
      stripe 
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="userid" label="用户ID" width="150" />
      <el-table-column prop="nickname" label="昵称" width="150" />
      <el-table-column prop="loginname" label="用户名" min-width="250" />
      <el-table-column prop="phone" label="联系电话" width="200" />
      
      <el-table-column label="操作" width="200" align="center">
        <template #default="{ row }">
          <el-button 
            size="small" 
            type="text"
            @click="handleEdit(row)"
          >
            编辑
          </el-button>
          <el-divider direction="vertical" />
          <el-button 
            size="small" 
            type="text" 
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
      />
    </div>
    
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "rquser-list"
});
import { ref, reactive, onMounted } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus';
import {listObjs ,deleteObj} from '@/api/rquser'
import { useRouter } from "vue-router";
const router = useRouter();

const total = ref(10);
const pageSize = ref(2); // 每页显示的项目数
const currentPage = ref(1); // 当前页码

// 分页切换事件
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  getDataList();
}
// 搜索表单数据
const searchForm = reactive({
  name: '',
  unit: ''
})

onMounted(() => {
  getDataList()
})
// 表格数据
const tableData = ref([
  {
    id: 1,
    nickname: '张三',
    loginname: '市场监督局餐饮科',
    phone: '18400009999'
  },
  {
    id: 2,
    name: '李四',
    unit: '市场监督局流通科',
    phone: '17654325678'
  },
  {
    id: 3,
    name: '王五',
    unit: '四季青市场监督管理所',
    phone: '13176589876'
  }
])

// 搜索操作
const handleSearch = () => {
  console.log('搜索条件:', searchForm)
  // 此处调用API获取数据
}

// 新增人员
const handleAdd = () => {
  console.log('打开新增人员弹窗')
  // 这里实现弹窗显示逻辑
}


const getDataList = async () => {
  var _data = {
    page: currentPage.value,
    limit: pageSize.value
  }
  const res = await listObjs(_data);
  if(res.code === 20000) {
    total.value = res.data.total || 0;
    tableData.value = res.data.items || [];
  } else {
    ElMessage.error(res.msg || '获取数据失败')
  }
}
// 编辑操作
const handleEdit = (row: any) => {
  console.log('编辑人员:', row)
  // 这里实现编辑弹窗显示逻辑
  router.push({
    path: '/rquser/detail',
    query: {
      userid: row.userid
    }
  })
}

// 删除操作
const handleDelete = (row: any) => {
  console.log('删除人员:', row)
  // 这里实现删除确认逻辑
  ElMessageBox.confirm('确定要删除该人员吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })  .then(async () => {
    var _data = {
      userid:row.userid
    }
    console.log(_data);
    const res = await deleteObj(_data)
    if(res.code === 20000) {
      ElMessage.success('删除成功')
      getDataList()
    } else {
      ElMessage.error(res.msg || '删除失败')
    }
  })  .catch(() => {
    ElMessage.info('已取消删除')    
  })  
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.search-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.button-group {
  padding-top: 4px;
}
</style>